.share {
  overflow: hidden;
  border-radius: 4px;
  background-color: #1e1e1e;
  color: #8f8f8f;
  box-shadow: 0 0 25px #111;
  $dark: #444444;

  %scrollbar {
    &::-webkit-scrollbar-track {
      background-color: #202020;
      width: 2px;
    }

    /* 设置滚动条拖动块颜色 */
    &::-webkit-scrollbar-thumb {
      background-color: #202020;
      border-radius: 2px;
      border: none;
    }
    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: #7e7e7e;
      }
    }
  }
  .container {
    padding: 12px;
    background-color: #0e0e0e;
    overflow-y: auto;
    @extend %scrollbar;
  }
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px;
    li {
      border: 2px solid transparent;
      padding: 8px;
      border-radius: var(--radius);
      background-color: #333;
      color: #ddd;

      &:hover {
        border: 2px solid $dark;
        color: #ddd;
      }
      .desc {
        height: 50px;
        background-color: $dark;
        padding: 8px;
        border-radius: 4px;
        overflow: auto;
        @extend %scrollbar;
      }
    }
    li.active {
      border: 2px solid #000;
      box-shadow: 0 0 25px #131313;
    }
  }
  .server {
    color: var(--blue);
    background-color: var(--primary);
    padding: 4px 12px;
  }

  .tag {
    background-color: $dark;
    padding: 4px 8px;
    border-radius: 2px;
  }
  div.server-title {
    background-color: #333;
    border-radius: var(--radius);
    padding: 4px 8px;
    color: #999;
  }
}
.core-head {
  background-color: #111;
  color: white;
  height: 36px;
}
.baseurl {
  background-color: #333;
  color: #999;
  border: 1px solid #000;
  height: 28px;
  padding: 0 8px;
}
